<template>
    <div>
        <Card v-if="totalProductNum===0">您尚未上架任何商品</Card>
        <div v-else>
            <Card v-for="(item,index) in myProductList" :value=index :key="item.productId">
                <Row>
                    <Col style="height: 80px">
                        <img v-bind:src="myProductCoverList[index]" style="height: 100%;width: auto">
                    </Col>
                    <Col span="3">
                        <Row>
                            <p>{{item.productName}}</p>
                        </Row>
                        <Row>
                            <Col v-for="tagItem in productTagList[index]" :key="tagItem" :value="tagItem">
                                <tag v-if="tagItem==='包邮'" color="success">
                                    {{tagItem}}
                                </tag>
                                <tag v-else-if="tagItem==='12期免息'" color="warning">
                                    {{tagItem}}
                                </tag>
                                <tag v-else color="default">
                                    {{tagItem}}
                                </tag>
                            </Col>
                        </Row>
                        <Row>
                            <p>￥:{{item.price}}</p>
                        </Row>
                    </Col>
                    <Col span="10">
                        <p>{{item.productBrief}}</p>
                    </Col>
                    <Col span="2">
                        <Row>点赞数：{{item.starsNum}}</Row>
                        <Row>评论数：{{item.commentsNum}}</Row>
                    </Col>
                    <Col>
                        <Button @click="brief(item.productId)">查看商品界面</Button>
                    </Col>
                    <Col>
                        <Row>
                            <p>当前库存：{{item.productStock}}</p>
                        </Row>
                        <Row>
                            <Button v-if="changeStockList[index]" @click="confirmStock(item.productId,index)">确定
                            </Button>
                            <Button v-else @click="updateStock(index)">修改库存</Button>
                        </Row>
                        <InputNumber v-if="changeStockList[index]" v-model="newStock" controls-outside></InputNumber>
                    </Col>
                    <Col>
                        <Button @click="deleteProduct(item.productId, index)">下架该商品</Button>
                    </Col>
                </Row>
            </Card>
            <Col class="mid">
                <Page :total="totalProductNum" @on-change="nextPage" page-size="10" show-total/>
            </Col>
        </div>
        <Modal
                v-model="deleteCheck"
                title="确认移除该商品？？"
                @on-ok="ok"
                @on-cancel="cancel">
            <p>注：此操作不可撤销，推荐您通过设置该商品的库存量为0来达到暂时下架的目的</p>
        </Modal>
    </div>
</template>

<script>
    import globalData from "@/utils/globalData";
    import axios from "axios";

    export default {
        name: "MyProduct",
        data() {
            return {
                newStock: 1,
                productTagList:[],
                changeStockList: [
                    false, false, false, false, false,
                    false, false, false, false, false
                ],
                userId: '',
                myProductList: [],
                nowPage: 1,
                totalProductNum: 0,
                myProductCoverList: [],
                deleteCheck: false,
                readyToDeleteId: '',
                readyToDeleteIndex: ''
            }
        },
        created: function () {
            let self = this
            this.userId = globalData.USER.userId
            axios({
                method: 'get',
                url: "/product/belongTo/" + this.userId + "/1"
            }).then(function (res) {
                self.myProductList = res.data.content
                self.totalProductNum = res.data.totalElements

                let mySelf = self
                for (let i = 0; i < self.myProductList.length; i++) {
                    //请求图片封面
                    axios({
                        method: 'get',
                        url: "/file/sig/product/" + self.myProductList[i].coverUUID,
                        responseType: 'blob'
                    }).then(function (res) {
                        mySelf.$set(mySelf.myProductCoverList, i, window.URL.createObjectURL(res.data))
                    })
                    //获取单个tag
                    let sigTagList = self.myProductList[i].tag.split('-')
                    sigTagList.pop()
                    self.productTagList.push(sigTagList)
                }
            })
        },
        methods: {
            confirmStock(productId, index) {
                let self = this
                axios({
                    method: 'patch',
                    url: "product/stock/" + productId + "/" + this.newStock
                }).then(function (res) {
                    if (res.data) {
                        self.$Message.success("修改成功")
                        self.$set(self.changeStockList, index, false)
                        self.myProductList[index].productStock = self.newStock
                    }
                })
            },
            brief(productId) {
                this.$router.push({name: 'ProductBrief', params: {productId: productId}});
            },
            nextPage(value) {
                this.nowPage = value
                let self = this
                axios({
                    method: 'get',
                    url: "/product/belongTo/" + this.userId + "/" + this.nowPage
                }).then(function (res) {
                    self.myProductList = res.data.content
                    //请求商品封面
                    self.myProductCoverList = []
                    let mySelf = self
                    for (let i = 0; i < self.myProductList.length; i++) {
                        axios({
                            method: 'get',
                            url: "/file/sig/product/" + self.myProductList[i].coverUUID,
                            responseType: 'blob'
                        }).then(function (res) {
                            mySelf.$set(mySelf.myProductCoverList, i, window.URL.createObjectURL(res.data))
                        })
                    }
                })
            },
            deleteProduct(productId, index) {
                this.deleteCheck = true
                this.readyToDeleteId = productId
                this.readyToDeleteIndex = index
            },
            ok() {
                let self = this
                axios({
                    method: 'delete',
                    url: "/product/" + this.readyToDeleteId
                }).then(function () {
                    self.$Message.success("删除成功")
                    //前端删除
                    self.myProductList.splice(self.readyToDeleteIndex, 1)
                    self.myProductCoverList.splice(self.readyToDeleteIndex, 1)
                })
            },
            cancel() {

            },
            updateStock(index) {
                this.$set(this.changeStockList, index, true)
            },
        }
    }
</script>

<style scoped>

</style>